<!--
 * @Author: your name
 * @Date: 2020-06-01 17:06:29
 * @LastEditTime: 2020-06-17 18:24:41
 * @LastEditors: Please set LastEditors
 * @Description:通讯录列表
 * @FilePath: \IM_Web\im_web\src\components\buddyList\buddyList.vue
--> 
<template>
    <div class="list" :class="accid === item.accid?'active':''">
        <div class="flex justify_between list_content" @click="handleaccid(item)">
            <!-- <div class="avatar" :style="{background:`url(${item.avatar})`,backgroundSize:'100% 100%'}" style=""></div> -->
            <div class="avatar">
                <img :src="item.avatar" alt="">
            </div>
            <div class="list_right">
                <div class="user_name">{{item.nickname}}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        item: {
            type: Object,
            default() {
                return {};
            }
        },
        accid: {
            type: [String,Number],
            default() {
                return "";
            }
        }
    },
    data() {
        return {
        };
    },
    computed: {},
    created() {},
    mounted() {},
    watch: {},
    methods: {
        handleaccid(params) {
            this.$emit("handle-accid", params);
        }
    },
    components: {}
};
</script>

<style scoped lang="less">
.list {
    width: 360px;
    // height: 716px;
    // max-height: 716px;
    // overflow-y: auto;
    // background: #f7f6f6;
    .active {
        background: #dedede;
    }
    .list_content:hover {
        background: #dedede;
    }
    .list_content {
        padding: 10px 15px;
        box-sizing: border-box;
        cursor: pointer;
        font-size: 18px;
        .avatar {
            width: 60px;
            height: 60px;
            background: #ddd;
            margin-right: 21px;
            img{
                display:inline-block;
                width: 100%;
                height: 100%;
            }
        }
        .list_right {
            width: 75%;
            .user_name {
                text-align: left;
            }
        }
    }
}
</style>
